<template>
  <!-- 主容器，支持暗黑模式 -->
  <view class="history-container" :class="{ dark: isDark }">
    <!-- 自定义导航栏 -->
    <view class="nav-bar">
      <!-- 返回按钮 -->
      <view class="nav-back" @click="goBack"><</view>
      <!-- 页面标题 -->
      <view class="nav-title">历史记录</view>
    </view>

    <!-- 分段器 -->
    <view class="tabs">
      <!-- 操作记录标签 -->
      <view class="tab" :class="{active: activeTab === 0}" @click="switchTab(0)">操作记录</view>
      <!-- 行驶轨迹标签 -->
      <view class="tab" :class="{active: activeTab === 1}" @click="switchTab(1)">行驶轨迹</view>
    </view>

    <!-- 内容区域 -->
    <scroll-view scroll-y class="content-area">
      <!-- 操作记录列表 -->
      <view v-if="activeTab === 0" class="history-list">
        <!-- 操作记录项 -->
        <view class="history-item" v-for="(item, index) in controlHistory" :key="index">
          <!-- 图标 -->
          <view class="item-icon" style="background: #6c5ce7;">{{item.icon}}</view>
          <!-- 信息 -->
          <view class="item-info">
            <text class="item-title">{{item.action}}</text>
            <text class="item-desc">时长: {{item.duration}}</text>
          </view>
          <!-- 时间 -->
          <text class="item-time">{{item.time}}</text>
        </view>
      </view>

      <!-- 行驶轨迹列表 -->
      <view v-if="activeTab === 1" class="history-list">
        <!-- 行驶轨迹项 -->
        <view class="history-item" v-for="(item, index) in pathHistory" :key="index">
          <!-- 图标 -->
          <view class="item-icon" style="background: #00cec9;">{{item.icon}}</view>
          <!-- 信息 -->
          <view class="item-info">
            <text class="item-title">{{item.name}}</text>
            <text class="item-desc">里程: {{item.distance}}</text>
          </view>
          <!-- 时间 -->
          <text class="item-time">{{item.time}}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      activeTab: 0, // 当前激活的标签索引
      // 操作记录数据
      controlHistory: [
        { icon: '🎮', action: '遥控驾驶', duration: '15分钟', time: '今天 14:30' },
        { icon: '🤖', action: '自动模式', duration: '1小时20分', time: '昨天 09:12' },
        { icon: '🎤', action: '语音控制', duration: '2分钟', time: '2023-10-25' },
        { icon: '🔥', action: '烟雾传感', duration: '2次', time: '2025-7-16' },
      ],
      // 行驶轨迹数据
      pathHistory: [
        { icon: '🗺️', name: '客厅巡航', distance: '12米', time: '今天 10:05' },
        { icon: '🗺️', name: '房间到厨房', distance: '8米', time: '昨天 18:00' },
      ],
      isDark: false // 是否暗黑模式
    };
  },
  
  // 页面显示生命周期
  onShow() {
    // 获取全局暗黑模式设置
    const dark = getApp().globalData.darkMode;
    this.isDark = dark;
  
    // 根据暗黑模式设置界面样式
    if (dark) {
      // 暗黑模式下的样式设置
      uni.setTabBarStyle({
        backgroundColor: '#1e1e1e',
        borderStyle: 'black',
        color: '#999999',
        selectedColor: '#ffffff'
      });
      uni.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: '#1e1e1e'
      });
    } else {
      // 明亮模式下的样式设置
      uni.setTabBarStyle({
        backgroundColor: '#ffffff',
        borderStyle: 'black',
        color: '#7A7E83',
        selectedColor: '#fb7e29'
      });
      uni.setNavigationBarColor({
        frontColor: '#000000',
        backgroundColor: '#F8F8F8'
      });
    }
  },
  
  // 方法定义
  methods: {
    /**
     * 返回上一页
     */
    goBack() {
      uni.switchTab({
        url: '/pages/AppCenter/AppCenter'
      })
    },
    
    /**
     * 切换标签页
     * @param {number} index - 要切换到的标签索引
     */
    switchTab(index) {
      this.activeTab = index;
    }
  }
}
</script>
<style lang="scss">
  // 导入全局样式
  @import "@/common/page-style.scss";
  
  // 主容器样式
  .history-container {
    background: #f8f9fa;
  }

  // 分段器样式
  .tabs {
    display: flex;
    background: #fff;
    padding: 24rpx 32rpx;
    border-bottom: 1px solid #f0f0f0;
    
    // 单个标签样式
    .tab {
      flex: 1;
      text-align: center;
      padding: 16rpx 0;
      font-size: 30rpx;
      color: #666;
      position: relative;
      transition: all 0.3s ease;
      
      // 激活状态样式
      &.active {
        color: #ff6b35;
        font-weight: 600;
        
        // 底部指示器
        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 60rpx;
          height: 6rpx;
          background: #ff6b35;
          border-radius: 3rpx;
        }
      }
    }
  }

  // 内容区域样式
  .content-area {
    height: calc(100vh - 100rpx - 44px - 100rpx);
  }

  // 历史记录列表样式
  .history-list {
    padding: 32rpx;
  }

  // 历史记录项样式
  .history-item {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 32rpx;
    border-radius: 32rpx;
    margin-bottom: 24rpx;
    box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.05);
  }

  // 图标样式
  .item-icon {
    width: 96rpx;
    height: 96rpx;
    border-radius: 24rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40rpx;
    margin-right: 32rpx;
    color: #fff;
  }

  // 信息区域样式
  .item-info {
    flex: 1;
    
    // 标题样式
    .item-title {
      display: block;
      font-size: 32rpx;
      font-weight: 600;
      margin-bottom: 8rpx;
    }
    
    // 描述样式
    .item-desc {
      display: block;
      font-size: 24rpx;
      color: #666;
    }
  }

  // 时间样式
  .item-time {
    font-size: 24rpx;
    color: #999;
  }
  
  // 暗黑模式样式覆盖
  .dark {
    // 主容器
    .history-container {
      background: #121212;
    }
    
    // 导航栏
    .nav-bar {
      background: #1e1e1e;
      color: #fff;
    }
    
    // 分段器
    .tabs {
      background: #1e1e1e;
      border-bottom-color: #333;
      
      .tab {
        color: #aaa;
        
        &.active {
          color: #ff6b35;
          
          &::after {
            background: #ff6b35;
          }
        }
      }
    }
    
    // 内容区域
    .content-area {
      background: #121212;
    }
    
    // 历史记录列表
    .history-list {
      padding: 32rpx;
    }
    
    // 历史记录项
    .history-item {
      background: #1e1e1e;
      box-shadow: none;
    }
    
    // 图标
    .item-icon {
      color: #fff;
    }
    
    // 信息区域
    .item-info {
      .item-title {
        color: #eee;
      }
      
      .item-desc {
        color: #bbb;
      }
    }
    
    // 时间
    .item-time {
      color: #777;
    }
    
    // 导航栏返回按钮和标题
    .nav-back {
      color: #fff;
    }
    .nav-title {
      color: #fff;
    }
  }
</style>